<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import {useUserStore} from '@/stores/user'
const userStore = useUserStore()

import 'vant/es/toast/style'
const router = useRouter()
//点击返回到Layout页面
const onClickLeft = () => history.back()

// 表单信息
const loginname = ref('')
const password = ref('')
const onSubmit = () => {
  userStore.onLogin(loginname.value, password.value)
}
</script>

<template>
  <van-nav-bar title="用户登录" left-text="返回" left-arrow @click-left="onClickLeft" />

    <div class="top">

    </div>

  <div class="form-item">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="loginname" name="loginname" label="手机号" placeholder="手机号" :rules="[{ required: true, message: '请填写手机号' }]" />
        <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"> 登录 </van-button>
      </div>
    </van-form>
  </div>
  <van-button type="success" class="small" size="small" @click="router.push('/register')">去注册</van-button>
  
</template>

<style scoped lang="less">
.top{
  width: 100%;
  height: 200px;
  background-color: pink;
  background: url('@/assets/鲜花.webp') no-repeat center center ;
  background-size: 100% 100%;
}
.form-item {
  margin-top: 50px;
}
</style>
